<template>
	<div class="cmp-testIntro">
		<div class="title">考试须知</div>
		<div class="test-intro">须知内容</div>
		<el-button type="primary" :disabled="timer!=0" @click="goTestExam"><span
				v-if="timer != 0">{{timer}}s后,</span>开始考试</el-button>
	</div>
</template>

<script>
	export default {
		props: {
			testId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				timer: 10,
				timeFn: null
			}
		},
		created() {
			this.startCount()
		},
		methods: {
			goTestExam() {
				this.$router.push({
					path: 'ExamComp',
					query: {
						id: this.testId
					}
				})
			},
			startCount() {
				clearTimeout(this.timeFn)
				if (this.timer == 0) {

					return false
				}
				this.timer -= 1
				this.timeFn = setTimeout(() => {
					this.startCount()
				}, 1000)
			}
		}
	}
</script>

<style lang="less">
	.cmp-testIntro {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px;

		.title {
			font-size: 24px;
			margin-bottom: 20px;
		}

		.test-intro {
			font-size: 16px;
			color: #333;
			line-height: 20px;
			width: 100%;
			margin-bottom: 30px;
		}
	}
</style>